<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="需求方:" prop="user_id">
                    <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属分类:" prop="category1">
                    <SelectCategory url="/admin/pz.category/tree"  placeholder="请输入所属分类"
                                    :check-strictly="true"
                                    :value="[form.category1, form.category2, form.category3]"></SelectCategory>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="需求价格:" prop="money">
                    <el-input-number v-model="form.money" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预约地址:" prop="address_id">
                    <el-input-number v-model="form.address_id" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开始时间:" prop="make_start_time">
                    <el-date-picker v-model="form.make_start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预约开始时间" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间:" prop="make_end_time">
                    <el-date-picker v-model="form.make_end_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预约结束时间" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="要求:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入要求" :rows="4" type="textarea" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="照片:" prop="images">
                    <ImageUpload v-model="form.images" :limit="10" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                      <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="稿件状态:" prop="bids_status">
                    <el-select v-model="form.bids_status" placeholder="请选择稿件状态" clearable>
                      <el-option v-for="(item, index) in bids_status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纠纷状态:" prop="dispute_status">
                    <el-select v-model="form.dispute_status" placeholder="请选择纠纷状态" clearable>
                      <el-option v-for="(item, index) in dispute_status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合作方:" prop="service_user_id">
                    <SelectPage v-model="form.service_user_id" :url="'/admin/user/selectPage'"
                                placeholder="请选择合作方" show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="服务时间:" prop="service_time">
                    <el-date-picker v-model="form.service_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择服务时间" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成时间:" prop="success_time">
                    <el-date-picker v-model="form.success_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择服务完成时间" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="订单ID:" prop="order_id">
                    <el-input-number v-model="form.order_id" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="支付订单号:" prop="pay_oid">
                    <el-input-number v-model="form.pay_oid" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="支付状态:" prop="pay_status">
                    <el-select v-model="form.pay_status" placeholder="请选择支付状态" clearable>
                      <el-option v-for="(item, index) in pay_status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预约金:" prop="deposit_money">
                    <el-input-number v-model="form.deposit_money" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="押金支付状态:" prop="deposit_status">
                    <el-select v-model="form.deposit_status" placeholder="请选择押金支付状态" clearable>
                      <el-option v-for="(item, index) in deposit_status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="押金支付号:" prop="disposit_oid">
                    <el-input-number v-model="form.disposit_oid" :step="1" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCategory from "@/components/My/SelectCategory";

export default {
    name: 'EditForm',
  components: {SelectCategory},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                user_id: [{ required: true, message: "请输入需求方", trigger: "blur" }],
                category1: [{ required: true, message: "请输入所属分类", trigger: "blur" }],
                category2: [{ required: true, message: "请输入二级分类", trigger: "blur" }],
                category3: [{ required: true, message: "请输入三级分类", trigger: "blur" }],
                money: [{ required: true, message: "请输入期望价格", trigger: "blur" }],
                address_id: [{ required: true, message: "请输入预约地址", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态", trigger: "blur" }],
                dispute_status: [{ required: true, message: "请输入纠纷状态", trigger: "blur" }],
                service_user_id: [{ required: true, message: "请输入合作方用户ID", trigger: "blur" }],
                deposit_money: [{ required: true, message: "请输入预约金", trigger: "blur" }],
                // deposit_status: [{ required: true, message: "请输入押金支付状态", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status:[
               { label: "询价", value: 1 },
               { label: "可接单", value: 2 },
               { label: "待确认服务", value: 3 },
               { label: "服务进行中", value: 4 },
               { label: "服务已完成", value: 5 },
               { label: "已评价", value: 6 },
               { label: "已取消", value: 8 },
            ],
            bids_status:[
               { label: "选择合作方", value: 1 },
               { label: "已选合作方", value: 2 },
            ],
            dispute_status:[
               { label: "无纠纷", value: 1 },
               { label: "待处理", value: 2 },
               { label: "已处理", value: 3 },
            ],
            pay_status:[
               { label: "待支付", value: 1 },
               { label: "已支付", value: 2 },
               { label: "已退款", value: 3 },
            ],
            deposit_status:[
               { label: "待支付", value: 1 },
               { label: "已支付", value: 2 },
               { label: "已退款", value: 3 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
